<template>
 <div class="weekend">
    <div class="weekend-title">
      周末去哪儿
    </div>
    <ul class='weekend-main'>
      <li class='weekend-item' v-for="(item, index) of weekendList" :key="index">
        <div class='weekend-img-wrapper'>
          <img class='weekend-img' :src="item.url">
        </div>
        <div class='weekend-info'>
          <p class="weekend-info-name">{{item.name}}</p>
          <p class="weekend-info-desc">{{item.desc}}</p>
        </div>
      </li>
    </ul>
 </div>
</template>

<script>
export default{
  name: 'HomeWeekend',
  props: {
    weekendList: Array
  }
}
</script>

<style lang="stylus" scoped >
  .weekend
    width: 100%
    .weekend-title
      margin-top .2rem
      width: 100%
      overflow: hidden
      text-indent: .2rem
      line-height: .8rem
      background-color: #eeeeee;
    .weekend-main
      width: 100%
      overflow: hidden
      .weekend-item
        width: 100%
        overflow: hidden
        .weekend-img-wrapper
          width: 100%
          height: 0
          padding-bottom: 37.1%
          overflow: hidden
          .weekend-img
            width: 100%
        .weekend-info
          padding: .14rem .2rem .2rem .2rem
          .weekend-info-name
            line-height: .48rem
            font-size: .28rem
            padding-right: 1.4rem
          .weekend-info-desc
            line-height: .42rem
            font-size: .24rem
            color: #616161
            padding-right: 1.4rem
</style>
